<template>
  <base-layout>
    <template #searchPanel>
      <search-panel
        :selectPer="'111'"
        :excelPer="'newCarOrder:export'"
        @search="search"
        :showSearchButton="true"
        :showExportButton="true"
        @export="excelInfo"
      >
        <el-input
          v-model="searchOptions.client"
          clearable
          placeholder="发票编号"
          style="width: 150px;margin-bottom: 20px;margin-top: 10px;"
        />
        <el-input
          v-model="searchOptions.makeInvoiceObj"
          clearable
          placeholder="开票对象"
          style="width: 150px;margin-bottom: 20px;margin-top: 10px;"
        />
        <el-input
          v-model="searchOptions.invoiceTitle"
          clearable
          placeholder="发票抬头"
          style="width: 150px;margin-bottom: 20px;margin-top: 10px;"
        />
        <el-select 
          v-model="searchOptions.invoiceType" 
          style="width: 150px;margin-bottom: 20px;margin-top: 10px;"
          placeholder="发票类型" 
          >
          <el-option
            v-for="item in invoiceTypeOptions"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
        <el-date-picker
          v-model="searchOptions.invoiceDate"
          type="datetimerange"
          start-placeholder="发票开始日期"
          end-placeholder="发票结束日期"
          clearable
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
        />
        <el-input
          v-model="searchOptions.client"
          clearable
          placeholder="明码编号"
          style="width: 150px"
        />
        <el-select
          clearable
          style="width: 150px"
          v-model="searchOptions.invoiceStatus"
          placeholder="开票状态"
        >
          <el-option
            v-for="item in invoiceStatusOptions"
            :key="item"
            :value="item"
            :label="item"
          />
        </el-select>
        <el-select
          clearable
          style="width: 150px"
          v-model="searchOptions.documentStatus"
          placeholder="单据状态"
        >
          <el-option
            v-for="item in documentStatusOptions"
            :key="item"
            :value="item"
            :label="item"
          />
        </el-select>        
        <el-date-picker
          v-model="searchOptions.registryTime"
          type="datetimerange"
          start-placeholder="登记开始时间"
          end-placeholder="登记结束时间"
          clearable
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
        />
        <el-select
          clearable
          style="width: 150px;margin-bottom: 20px;margin-top: 10px;"
          v-model="searchOptions.paperFlag"
          placeholder="纸质发票"
        >
          <el-option
            v-for="item in paperFlagOptions"
            :key="item.label"
            :label="item.label"
            :value="item.value" />
        </el-select> 
        <el-input
          v-model="searchOptions.vin"
          clearable
          placeholder="明细编号"
          style="width: 150px"
        />
        <el-select 
          v-model="searchOptions.invoiceCategory" 
          style="width: 150px;margin-bottom: 20px;margin-top: 10px;"
          placeholder="发票类别" 
          >
          <el-option
            v-for="item in invoiceCategoryOptions"
            :key="item"
            :label="item"
            :value="item" />
        </el-select>
      </search-panel>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :width="160"
      >
        <template #action="{ row }">
          <i title="开票" v-permission="'salesInvoice:issue'" class="el-icon-s-order cursor" @click="invoice(row)"></i>
          <i title="详情" v-permission="'salesInvoice:detail'" @click="viewDetail(row)" class="el-icon-view cursor"></i>
          <i title="作废" v-permission="'newCarOrder:cancellation'" v-if="row.status == 2" @click="invalid(row)" class="el-icon-delete-solid cursor"></i>
        </template>
      </data-table>
    </template>
  </base-layout>
</template>
<script>
import baseMixin from '@/mixins/base'
import {
  salesInvoiceList,
} from '@/api/financial/index'
import { getDict, exportExcel } from '@/utils/index'
export default {
  components: {},
  mixins: [
    baseMixin({
      idName: 'id',
      findData: salesInvoiceList,
      dataName: ['content', 'totalRecords']
    })
  ],
  data() {
    return {
      getInvoiceId: null,
      modelList: [],
      dataArry: [],
      getDict: getDict,
      tableColumnAttributes: [
        { name: '订单号', value: 'businessCode', type: 'text' },
        { name: '订单类型', value: 'businessType', type: 'text' },
        { name: '发票号码', value: 'invoiceNum', type: 'text' },
        { name: '发票金额', value: 'invoiceAmount', type: 'text' },
        { name: '发票类别', value: 'invoiceCategory', type: 'text' },
        { name: '客户编号', value: 'customerNumber', type: 'text' },
        { name: '客户姓名', value: 'customerName', type: 'text' },
        { name: '商品编码', value: 'vin', type: 'text' },
        { name: '开票对象', value: 'makeInvoiceObj', type: 'text' },
        { name: '发票抬头', value: 'invoiceTitle', type: 'text' },
        { name: '发票日期', value: 'invoiceDate', type: 'text' },
        { name: '发票状态', value: 'invoiceStatus', type: 'text' },
        { name: '单据状态', value: 'documentStatus', type: 'text' },
        { name: '登记机构', value: 'registry', type: 'text' },
        { name: '登记时间', value: 'registryTime', type: 'text' },
      ],
      dict: {},
      paperFlagOptions: [{label: '有', value: true},{label: '无', value: false},],
      invoiceTypeOptions: ['增值税普通发票','增值税专用发票','机动车销售统一发票','服务类发票'],
      invoiceCategoryOptions: ['商品发票','整车销售发票','维修发票'],
      invoiceStatusOptions: ['正常', '已红冲', '已作废'],
      documentStatusOptions: ['正常', '红单', '蓝单']
    }
  },
  methods: {
    invoice(row){
      this.getInvoiceId = row.id;
    },
    // 编辑员工信息
    updateUser(row) {
      const { id } = row
      this.$router.push({
        path: '/personnel/updataEmployee',
        query: {
          userId: id
        }
      })
    },
    //查看详情
    viewDetail(row) {
      const { id } = row
      this.$router.push({
        path: '/orderManagement/carDeatail',
        query: {
          id: id
        }
      })
    },
    // 查询
    search() {
      this.currentPage = 1
      this.setTableData()
    },
    //导出
    excelInfo () {
      exportExcel("NewCarOrder", "新车订单(整合)", {}, this.pageSize, this.currentPage);
    },
  },
  async mounted() {}
}
</script>
<style scoped>
  .cursor {
    margin-left: 15px;
    cursor: pointer
  }
</style>
